<!--
 * @Author: your name
 * @Date: 2021-12-29 17:38:11
 * @LastEditTime: 2022-01-07 10:35:29
 * @LastEditors: your name
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \my-site\src\components\pager\index.vue
-->
<template>
  <!-- 如果没有总页数没有超过1页，就不需要这个分页组件了 -->
  <div class="pager-container" v-if="totalPage > 1"> <!-- 没有频繁变化就用v-if（删除节点）有频繁变化就用v-show（display:none） -->
      <!-- :class={类名:true} 为true就拥有该类名，为false就没有该类名 -->
      <a @click="pageChange(1)" :class="{disabled:current === 1}">|&lt;&lt;</a> <!-- current === 1 第一页了不能向前翻 -->
      <a @click="pageChange(current - 1)" :class="{disabled:current === 1}">&lt;&lt;</a>
      <a @click="pageChange(item)"  :class="{active:current === item}" v-for="(item, i) in pageNums" :key="i">{{item}}</a>
      <a @click="pageChange(current + 1)" :class="{disabled:current === totalPage}">&gt;&gt;</a> <!-- current === 总页数 最后一页了不能向后翻 -->
      <a @click="pageChange(totalPage)" :class="{disabled:current === totalPage}">&gt;&gt;|</a>
  </div>
</template>

<script>
export default {
    created(){
    },
    props:{
        current:{ //当前页码
            type:Number,
            default:1,
        },
        total:{ //总数据量
            type:Number,
            default:0,
        },
        limit:{ //每一页的容量
            type:Number,
            default:10,
        },
        visibleNumber:{ //可见页码数
            type:Number,
            default:10,
        },
    },
    computed:{
        totalPage(){
            // 总数据量 / 每一页承受多少数据量 === 总页数
            // Math.ceil 不足一页的数据量，也要新开一页装下
            return Math.ceil(this.total / this.limit) 
        },
        minPage(){ //最小可见页码数
            return this.current - Math.floor(this.visibleNumber / 2) < 1 ? 1 : this.current - Math.floor(this.visibleNumber / 2)
        },
        maxPage(){ //最大可见页码数
            return this.minPage + this.visibleNumber - 1 > this.totalPage ? this.totalPage : this.minPage + this.visibleNumber - 1
        },
        pageNums(){ //页码数组
            const pageArr = [];
            for(let i = this.minPage; i <= this.maxPage; i++){
                pageArr.push(i);
            }
            return pageArr;
        }
    },
    methods:{
        // 页码变化，通知父组件，进行更
        pageChange(newPage){
            // 将页码控制在合理区间
            if(newPage > this.totalPage){
                newPage = this.totalPage
            }
            if(newPage < 1){
                newPage = 1 
            }
            // 拒绝重复点击相同页
            if(newPage === this.current){
                return;
            }
            this.$emit("handlePage", newPage)
        }
    }
}
</script>

<style scoped lang="less">
@import "~@/styles/var.less"; //less颜色变量 ~@代表src目录
.pager-container{
    display:flex;
    justify-content:center; 
    margin:20px 0;
    a{
        margin:0 7px;
        color:@primary;
        cursor:pointer;
        &.disabled{ //&表示a
            cursor:not-allowed;
            color:@gray;            
        };
        &.active{
            color:@words;
            font-weight:bold;
            cursor:text
        }
    }
}
</style>